<template>
  <div>
    <div class="datacon">

      <div class="datapadding" @click="gobuyrommreservation">
        <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
          <img
            style="width: 100%; height: 100%; border-radius: 1rem"
            src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
            alt=""/>
        </div>
        <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
          <div>豪华自助餐</div>
          <div style="font-size: 10px;margin-top: 0.5rem">
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
          </div>
          <div style="text-align: left;margin-top: 0.5rem">
            ￥598.00
          </div>
          <!--        星星评分-->
          <div>
            <el-rate
              v-model="starvalue"
              disabled
              show-score
              text-color="red"
            />
          </div>
          <div style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
            推荐
          </div>
        </div>

        <!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
        <!--          <ul-->
        <!--            v-infinite-scroll="load"-->
        <!--            class="list"-->
        <!--            :infinite-scroll-disabled="disabled"-->
        <!--          >-->
        <!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
        <!--          </ul>-->
        <!--               -->
        <!--          <p v-if="loading">Loading...</p>-->
        <!--          <p v-if="noMore">No more</p>-->
        <!--        </div>-->

      </div>
      <div class="datapadding">
        <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
          <img
            style="width: 100%; height: 100%; border-radius: 1rem"
            src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
            alt=""/>
        </div>
        <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
          <div>豪华自助餐</div>
          <div style="font-size: 10px;margin-top: 0.5rem">
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
          </div>
          <div style="text-align: left;margin-top: 0.5rem">
            ￥598.00
          </div>
          <!--        星星评分-->
          <div>
            <el-rate
              v-model="starvalue"
              disabled
              show-score
              text-color="red"
            />
          </div>
          <div style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
            预定
          </div>
        </div>

        <!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
        <!--          <ul-->
        <!--            v-infinite-scroll="load"-->
        <!--            class="list"-->
        <!--            :infinite-scroll-disabled="disabled"-->
        <!--          >-->
        <!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
        <!--          </ul>-->
        <!--               -->
        <!--          <p v-if="loading">Loading...</p>-->
        <!--          <p v-if="noMore">No more</p>-->
        <!--        </div>-->

      </div>
      <div class="datapadding">
        <div style="width: 50%; height: 90%; margin-left: 0.2rem; margin-top: 0.2rem">
          <img
            style="width: 100%; height: 100%; border-radius: 1rem"
            src="https://gd-hbimg.huaban.com/17f2a2325d149910d48e216fcbb09bafd496d4583d47d-wIWJfu_fw480webp"
            alt=""/>
        </div>
        <div style="margin-left: 1rem;margin-top: 0.5rem;font-weight: lighter;position: relative">
          <div>豪华自助餐</div>
          <div style="font-size: 10px;margin-top: 0.5rem">
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">舒适</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">地暖</span>
            <span style="border: 0.01rem solid black;padding: 0.1rem;margin: 0.2rem;">温泉</span>
          </div>
          <div style="text-align: left;margin-top: 0.5rem">
            ￥598.00
          </div>
          <!--        星星评分-->
          <div>
            <el-rate
              v-model="starvalue"
              disabled
              show-score
              text-color="red"
            />
          </div>
          <div style="position: absolute; font-size: 12px ;bottom: 0.8rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        color:white;
        left: 5.6rem;width: 2rem; height: 1rem;background-color: #00b0b7">
            预定
          </div>
        </div>

        <!--             <div class="infinite-list-wrapper" style="overflow: auto">-->
        <!--          <ul-->
        <!--            v-infinite-scroll="load"-->
        <!--            class="list"-->
        <!--            :infinite-scroll-disabled="disabled"-->
        <!--          >-->
        <!--            <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>-->
        <!--          </ul>-->
        <!--               -->
        <!--          <p v-if="loading">Loading...</p>-->
        <!--          <p v-if="noMore">No more</p>-->
        <!--        </div>-->

      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
const router= useRouter()
const starvalue = ref(3.5)
const gobuyrommreservation=()=>{
  router.push('/admin/buy_room_reservation')
}
</script>

<style lang="scss" scoped>
.datacon {
  width: 100%;
  background-color: #e5e5e5;
  overflow: hidden;
font-size: 22px;

  .datapadding {

    overflow: hidden;
    display: flex;
    margin: 0.3rem 0.4rem;
    width: 95%;
    height: 6rem;
    border-radius: 0.5rem;
    background-color: white;
  }
}

</style>
